<template>
  <div class="ele-body">
    <!-- 数据表格 -->
    <el-card shadow="always" body-style="padding: 30px 40px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="关键字：">
          <el-input
            style="width: 400px"
            v-model="formInline.title"
            placeholder="关键字"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="100" label="序号">
        </el-table-column>
        <el-table-column prop="productCode" label="产品编号" width="180">
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" width="320">
        </el-table-column>
        <el-table-column prop="productItemName" label="规格" width="180">
        </el-table-column>
        <el-table-column prop="stockQty" label="库存数量" width="130">
        </el-table-column>
        <el-table-column prop="lockQty" label="锁定数量" width="130">
        </el-table-column>
        <el-table-column prop="outStockQty" label="出库数量" width="130">
        </el-table-column>
        <el-table-column prop="usableQty" label="可用库存" width="150">
        </el-table-column>
        <el-table-column label="操作" min-width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="onInventory(scope.row.productId, scope.row.productItemId)"
              size="small"
              >入库明细</el-button
            >
            <el-button
              type="text"
              @click="onOutbound(scope.row.productId, scope.row.productItemId)"
              size="small"
              >出库明细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="display: flex; justify-content: flex-end"
        background
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :current-page.sync="currentPage"
        :total="totalNum"
        :page-size="10"
      >
      </el-pagination>
    </el-card>

    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      width="70%"
      :visible.sync="dialogFormVisible"
    >
      <el-table
        style="width: 100%"
        max-height="600"
        :data="inventoryList"
        border
      >
        <el-table-column type="index" width="100" label="序号" align="center">
        </el-table-column>
        <el-table-column
          prop="productCode"
          label="产品编号"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="productName"
          label="产品名称"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="productItemName"
          label="规格"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="qty" label="入库数量" width="150" align="center">
        </el-table-column>
        <el-table-column
          prop="costPrice"
          label="成本单价"
          min-width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="unitName"
          label="单位"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="入库日期"
          width="150"
          align="center"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        style="display: flex; justify-content: flex-end"
        background
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :current-page.sync="invenCurrentPage"
        :total="invenTotalNum"
        :page-size="10"
      >
      </el-pagination>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      width="83%"
      :visible.sync="dialogFormVisible01"
    >
      <el-table
        style="width: 100%"
        max-height="600"
        :data="outboundList"
        border
      >
        <el-table-column type="index" width="100" label="序号" align="center">
        </el-table-column>
        <el-table-column
          prop="stockNum"
          label="流水码"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="productCode"
          label="产品编号"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="productName"
          label="产品名称"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="productItemName"
          label="规格"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="costPrice"
          label="单价成本"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="unitName"
          label="单位"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="wareHouseName"
          label="仓库"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="statusDesc"
          label="出库状态"
          min-width="150"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="useStatusDesc"
          label="使用状态"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="创建日期"
          min-width="150"
          align="center"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        style="display: flex; justify-content: flex-end"
        background
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :current-page.sync="outboundCurrentPage"
        :total="outboundTotalNum"
        :page-size="10"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import {
  QueryStockItemByCondition,
  QueryInStockItemByCondition,
  QueryStockByCondition,
  GetGuid,
  GetBannerDetail
} from '@/api/invoicingmanager';
export default {
  name: 'Banner',
  data() {
    return {
      itemDetail: {},
      title: '',
      guid: '',
      currentPage: 1,
      totalNum: 0,
      formInline: {
        title: ''
      },
      tableData: [],
      dialogFormVisible: false,
      dialogFormVisible01: false,
      form: {
        title: '',
        content: '',
        fileList: []
      },
      inventoryList: [],
      invenCurrentPage: 1,
      invenTotalNum: 0,
      outboundList: [],
      outboundCurrentPage: 1,
      outboundTotalNum: 0,
      productId: '',
      productItemId: ''
    };
  },
  created() {
    this.initData();
    this.getGuid();
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initData();
    },
    handleOutboundCurrentChange(val) {
      this.outboundCurrentPage = val;
      this.getOutbound(this.productId, this.productItemId);
    },
    onOutbound(productId, productItemId) {
      this.dialogFormVisible01 = true;
      this.productId = productId;
      this.productItemId = productItemId;
      this.getOutbound(productId, productItemId);
    },
    onInventory(productId, productItemId) {
      this.dialogFormVisible = true;
      this.productId = productId;
      this.productItemId = productItemId;
      this.getInventory(productId, productItemId);
    },

    handleInventoryCurrentChange(val) {
      this.invenCurrentPage = val;
      this.getInventory(this.productId, this.productItemId);
    },

    getOutbound(productId, productItemId) {
      QueryStockItemByCondition({
        pageIndex: this.outboundCurrentPage,
        pageSize: 10,
        conditions: {
          productId: productId,
          productItemId: productItemId
        },
        orderBys: [
          {
            sort: 'createDate',
            order: 1
          }
        ]
      })
        .then((res) => {
          this.outboundList = res.items;
          this.outboundTotalNum = res.totalrecords;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },

    getInventory(productId, productItemId) {
      QueryInStockItemByCondition({
        pageIndex: this.invenCurrentPage,
        pageSize: 10,
        conditions: {
          productId: productId,
          productItemId: productItemId
        },
        orderBys: [
          {
            sort: 'createDate',
            order: 1
          }
        ]
      })
        .then((res) => {
          this.inventoryList = res.items;
          this.invenTotalNum = res.totalrecords;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },

    initData() {
      QueryStockByCondition({
        pageIndex: this.currentPage,
        pageSize: 10,
        conditions: {
          keyword: this.formInline.title,
          status: 0
        },
        orderBys: [
          {
            sort: 'createDate',
            order: 0
          }
        ]
      })
        .then((res) => {
          this.tableData = res.items;
          this.invenTotalNum = res.totalrecords;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    getDetail(id) {
      GetBannerDetail({
        id: id
      })
        .then((res) => {
          this.form = {
            title: res.title,
            content: res.content
          };
          this.itemDetail = res;
          this.form.fileList = [{ url: res.simgUrl }];
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    handleSearch() {
      this.currentPage = 1;
      this.initData();
    },
    handleReset() {
      this.formInline = {};
      this.currentPage = 1;
    },
    getGuid() {
      GetGuid()
        .then((res) => {
          this.guid = res;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
